<template>
  <a-drawer
    class="container-set"
    v-model:visible="visible"
    title="布局容器配置"
    placement="right"
    :maskClosable="false"
    width="650"
  >
    <a-form class="m-form-box" :model="formState" :rules="formRules" ref="form">
      <a-form-item label="key" name="">
        <a-input v-model:value="formState.key" disabled />
      </a-form-item>
      <a-form-item label="标题" name="title">
        <a-input v-model:value="formState.title" placeholder="" />
      </a-form-item>
      <a-form-item label="布局" name="">
        <a-radio-group v-model:value="formState.direction" button-style="solid">
          <a-radio-button value="column">纵向布局</a-radio-button>
          <a-radio-button value="row">横向布局</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="栅格总数" name="spanNum">
        <a-input-number v-model:value="formState.spanNum" min="1" />
      </a-form-item>
      <a-form-item label="比例-宽" name="ratioW">
        <a-input-number v-model:value="formState.ratioW" min="0" />
      </a-form-item>
      <a-form-item label="比例-高" name="ratioH">
        <a-input-number v-model:value="formState.ratioH" min="0" />
      </a-form-item>
      <a-form-item label="宽度" name="width">
        <combination-input v-model="formState.width" />
      </a-form-item>
      <a-form-item label="高度" name="height">
        <combination-input v-model="formState.height" />
      </a-form-item>
      <a-form-item label="左边距离" name="left">
        <combination-input v-model="formState.left" />
      </a-form-item>
      <a-form-item label="右边距离" name="right">
        <combination-input v-model="formState.right" />
      </a-form-item>
      <a-form-item label="上边距离" name="top">
        <combination-input v-model="formState.top" />
      </a-form-item>
      <a-form-item label="下边距离" name="bottom">
        <combination-input v-model="formState.bottom" />
      </a-form-item>
      <a-form-item label="动画效果" name="">
        <a-radio-group v-model:value="formState.transitionType" button-style="solid">
          <a-radio-button value="">无</a-radio-button>
          <a-radio-button value="left">从左进入</a-radio-button>
          <a-radio-button value="right">从右进入</a-radio-button>
          <a-radio-button value="bottom">从下进入</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="样式" name="styles">
        <a-textarea
          :rows="4"
          v-model:value="formState.styles"
          placeholder='请输入自定义样式，为JSON对象格式，eg：{"name":"张三"}'
        />
      </a-form-item>
    </a-form>

    <template #extra>
      <a-space>
        <a-button type="primary" @click="handleSave">保存</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script>
import CombinationInput from './CombinationInput.vue'
import { validatorJsonPromise } from '../../../../utils/validate'
/**
 * 页面配置 - 布局容器的配置
 * @author 朱琦
 * @date   时间：2023/2/1
 */

// 表单默认字段
const defaultForm = {
  key: null,
  title: null,
  direction: 'column',
  spanNum: 24,
  ratioW: null,
  ratioH: null,
  width: null,
  height: null,
  left: null,
  right: null,
  top: null,
  bottom: null,
  transitionType: '',
  styles: null
}

/**
 * 校验 css 属性
 * @param {*} _rule
 * @param {*} value
 */
const validatorCssLength = async (_rule, value) => {
  if (value && value.constructor === Array) {
    if (!value[0] || !value[1]) {
      return Promise.reject('请选择布局容器和属性，数字可不填')
    }
  }
  return Promise.resolve()
}

export default {
  name: 'ContainerSet',
  props: {},
  components: { CombinationInput },
  data() {
    return {
      formState: {},
      formRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        ratioW: [{ required: true, message: '请输入容器比例宽', trigger: 'blur' }],
        ratioH: [{ required: true, message: '请输入容器比例高', trigger: 'blur' }],
        height: [{ validator: validatorCssLength, trigger: 'change' }],
        styles: [{ validator: validatorJsonPromise, trigger: 'blur' }],
        spanNum: [{ required: true, message: '请输入容器栅格总数', trigger: 'blur' }]
        // width: [{ required: true, validator: validatorCssLength, trigger: 'blur' }],
        // left: [{ required: true, validator: validatorCssLength, trigger: 'blur' }],
        // top: [{ required: true, validator: validatorCssLength, trigger: 'blur' }],
        // right: [{ required: true, validator: validatorCssLength, trigger: 'blur' }],
        // bottom: [{ required: true, validator: validatorCssLength, trigger: 'blur' }]
      },
      visible: false
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 显示
     * @param {Object} data 修改时的数据
     */
    show(data) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.setData(data)
      })
    },
    /**
     * 关闭
     */
    hide() {
      this.visible = false
    },
    /**
     * 设置表单数据
     * @param {Object} data
     */
    setData(data = defaultForm) {
      Object.keys(defaultForm).forEach(key => {
        this.formState[key] = data[key] === undefined ? defaultForm[key] : data[key]
      })

      this.formState.styles = data.styles ? JSON.stringify(data.styles) : null
      // 比例值设置
      // const ratio = data.ratio && data.ratio.length === 2 ? data.ratio : [null, null]
      // this.formState.ratioW = ratio[0]
      // this.formState.ratioH = ratio[1]
    },
    /**
     * 点击保存
     */
    handleSave() {
      this.$refs.form.validate().then(res => {
        const form = {}
        Object.keys(this.formState).forEach(key => {
          form[key] = this.formState[key]
        })
        form.styles = this.formState.styles ? JSON.parse(this.formState.styles) : null
        this.$emit('submit', form)
        this.hide()
      })
    }
  }
}
</script>

<style scoped lang="less">
@import url(../../../../assets/styles/form.less);
.container-set {
}
</style>
